<template>
  <div class="class-container">
    <div class="head">
      <div class="top">
        <el-form ref="form" :inline="true" :model="form" label-width="100px">
          <el-form-item label="班级名称:">
            <el-input type="text" v-model="form.class" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="班级人数:">
            <el-input type="text" v-model="form.people" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="带班老师:">
            <el-input type="text" v-model="form.teacher" placeholder=""></el-input>
            <el-button>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot">
        <el-button @click="addClass">新建班级</el-button>
        <el-button @click="getPay">收费</el-button>
        <el-button type="primary">导入班级</el-button>
        <span>下载模板</span>
      </div>
    </div>
    <div class="main">
      <!--  @select="selection" 选择单个 @select-all="disabledAll" 选择全部 -->
      <el-table ref="multipleTable" :data="classData" border style="width: 98%" :header-cell-style="{background:'#f5f4f4'}">
        <el-table-column type="selection" width="90" label="选择"></el-table-column>
        <el-table-column prop="classname" label="班级名称" width="310"></el-table-column>
        <el-table-column prop="classcode" label="班级代码" width="310"></el-table-column>
        <el-table-column prop="classpeople" label="班级人数" width="297"></el-table-column>
        <el-table-column prop="classteacher" label="带班老师" width="310"></el-table-column>
        <el-table-column label="操作" width="315">
          <template slot-scope="scope">
            <el-button size="small" @click="getEdit">编辑</el-button>
            <el-button size="small" style="color:#ff0000" @click="del">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="prev, pager, next, sizes, jumper"
          :total="100">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="新建班级"
      :visible.sync="addShow"
      width="70%"
      class="addClass"
      :before-close="handleClose">
      <el-form ref="form" :model="addclass" label-width="100px">
        <el-form-item label="班级名称:">
          <el-input type="text" v-model="addclass.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="班级代码:">
          <el-input type="text" v-model="addclass.code" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="带班老师:">
          <el-select v-model="addclass.teacher" placeholder="">
            <el-option v-for="(item,index) in teacher" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生:">
          <el-transfer v-model="value" :data="student" :titles="['未属学生', '所属学生']"></el-transfer>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeClass">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="收费"
      :visible.sync="payShow"
      width="70%"
      class="pay"
      :before-close="handleClose">
      <el-form ref="form" :model="payclass" label-width="100px">
        <el-form-item label="缴费账单名称:">
          <el-input type="text" v-model="payclass.name" placeholder="缴费账单名称"></el-input>
        </el-form-item>
        <el-form-item label="收费项:">
          <div class="item">
            <el-input type="text" v-model="payclass.contribution1" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue1" placeholder="金额"></el-input>
            <el-button>删除</el-button>
            <el-button>添加项</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution2" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue2" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution3" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue3" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
          <div class="item">
            <el-input type="text" v-model="payclass.contribution4" placeholder="收费项名称"></el-input>
            <el-input type="text" v-model="payclass.contributionvalue4" placeholder="金额"></el-input>
            <el-button>删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="缴费截止日期:">
          <el-date-picker
            v-model="payclass.date"
            type="date"
            placeholder="年/月/日">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closePay">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑班级"
      :visible.sync="editShow"
      width="70%"
      class="editClass"
      :before-close="handleClose">
      <el-form ref="form" :model="addclass" label-width="100px">
        <el-form-item label="班级名称:">
          <el-input type="text" v-model="addclass.name" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="班级代码:">
          <el-input type="text" v-model="addclass.code" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="带班老师:">
          <el-select v-model="addclass.teacher" placeholder="">
            <el-option v-for="(item,index) in teacher" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生:">
          <el-transfer v-model="value" :data="student" :titles="['未属学生', '所属学生']"></el-transfer>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetClassdata, GetStudent, GetTeacher } from "@/api/class";
export default {
  name:"class",
  data() {
    return {
      studata: [],
      student:[],
      teacher:[],
      value: [1],
      currentPage: 1,
      addShow:false,
      payShow:false,
      editShow:false,
      form:{
        class:'',
        people:'',
        teacher:''
      },
      classData:[],
      addclass:{
        name:'',
        code:'',
        teacher:''
      },
      payclass:{
        name:'',
        contribution1:'',
        contribution2:'',
        contribution3:'',
        contribution4:'',
        contributionvalue1:'',
        contributionvalue2:'',
        contributionvalue3:'',
        contributionvalue4:'',
        date:''
      }
    }
  },
  mounted() {
    this.init();
    this.getStu();
    this.getTea();
  },
  methods: {
    init() {
      GetClassdata().then( res => {
        if(res.code === 200) {
          this.classData = res.data;
        }
      })
    },
    getStu() {
      GetStudent().then( res => {
        if(res.code === 200) {
          this.studata = res.data;
          const data = [];
          this.studata.forEach((stu, index) => {
            data.push({
              label: stu.label,
              key: index
            })
          });
          this.student = data;
        }
      })
    },
    getTea() {
      GetTeacher().then( res => {
        if(res.code === 200) {
          this.teacher = res.data;
        }
      })
    },
    addClass() {
      this.addShow = true;
    },
    closeClass() {
      this.addShow = false;
    },
    getPay() {
      this.payShow = true;
    },
    closePay() {
      this.payShow = false;
    },
    getEdit() {
      this.editShow = true;
    },
    closeEdit() {
      this.editShow = false;
    },
    del() {
      this.$alert("是否删除?", "删除", {
        confirmButtonText: "确定"
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.class-container {
  width: 98%;
  height: 865px;
  margin-top: 20px;
  margin-left: 20px;
  background:#fff;
  position: relative;
}
.head{
  width: 100%;
  height: 145px;
  .top{
    width: 97%;
    height: 60px;
    margin: 0 auto;
    padding-top: 20px;
    /deep/ .el-form-item__label{
      width: 101px !important;
    }
    /deep/ .el-input{
      width: auto;
    }
    /deep/ .el-button{
      margin-left: 20px;
    }
  }
  .foot{
    margin-left: 55px;
    margin-top: 25px;
    span{
      margin-left: 20px;
      color: #5255FF;
    }
  }
}
.main{
  width: 100%;
  height: auto;
  .el-table{
    /deep/ .cell{
      text-align: center;
    }
    /deep/ .el-table_2_column_20{
      color: #109CEF;
    }
    /deep/ .el-button{
      border: none;
      color: #00f;
      padding: 0;
    } 
  }
  .block{
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    /deep/ .el-pagination button{
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li{
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
    }
    /deep/ .el-pager li.active{
      background: #409EFF;
      color: #fff;
      border: none;
    }
  }
}
.addClass,.editClass{
  /deep/ .el-dialog{
    .el-form-item__content{
      width: 14%;
    }
    .el-form-item:last-of-type{
      .el-form-item__content{
        width: 40%;
      }
    }
    .el-transfer__button{
      width: 40px;
      height: 40px;
      color: #ccc;
      border: 1px solid #ccc;
      border-radius: 50%;
    }
  }
}
.pay{
  /deep/ .el-dialog{ 
    .el-form-item__label{
      width: 101px !important;
    }
    .el-form-item__content{
      margin-left: 120px !important;
      width: 15%;
    }
    .el-form-item:nth-child(2){
      .el-form-item__content{
        width: 50%;
      }
    }
    .item{
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      .el-input{
        width: 30%;
        margin-right: 5px;
      }
    }
  }
}
</style>